<template>
	<view class="sti_result_page" v-if="showResultPage">
		<view class="audit_img_box">
			<image v-if="info.status==0" class="audit_img" :src="onlinePic+'audit_ing.png'">
			</image>
			<image v-if="info.status==1" class="audit_img" :src="onlinePic+'audit_ok.png'">
			</image>
			<image v-if="info.status==2" class="audit_img" :src="onlinePic+'audit_no.png'">
			</image>
		</view>
		<view class="f-18 text-c mt-15">
			<text>{{info.status_text}}</text>
		</view>
		<view v-if="info.refuse_reason" :class="status==2?'audit_text_no':'audit_text'">
			<text>{{info.refuse_reason}}</text>
		</view>
		<view v-if="info.contract_status==0">
			<view v-if="info.status==1" class="submit_btn_block mt-20" @click="openForms">补充资料</view>
			<view v-if="info.status==2" class="submit_btn_block mt-20" @click="updateForm">修改信息</view>
		</view>
		<!-- 补充资料状态：contract_status:0未补充，1已补充审核中，2已补充审核通过，3已补充审核未通过去修改， -->
		<view v-else>
			<view v-if="info.contract_status==1" class="group_wait_btn_block mt-20">{{info.contract_button_name}}</view>
			<view v-if="info.contract_status==2" class="group_payok_btn_block mt-20">{{info.contract_button_name}}
			</view>
			<view v-if="info.contract_status==3" class="submit_btn_block mt-20" @click="updateForms">{{info.contract_button_name}}</view>
			<view class="mt-10 text-c f-11" style="color: #C92359;" v-if="info.contract_button_tips">
				<text>{{info.contract_button_tips}}</text>
			</view>
		</view>

		<view class="result_info_box">
			<view class="result_info_cell display_flex">
				<view class="result_info_title">姓名</view>
				<view class="f-13 flex-1">{{info.name}}</view>
			</view>
			<view class="result_info_cell display_flex">
				<view class="result_info_title">手机号</view>
				<view class="f-13 flex-1">{{info.mobile}}</view>
			</view>
			<view class="result_info_cell display_flex">
				<view class="result_info_title">经销商</view>
				<view class="f-13 flex-1">{{info.company_title}}</view>
			</view>
			<view class="result_info_cell display_flex">
				<view class="result_info_title">车型</view>
				<view class="f-13 flex-1">{{info.car_series}}</view>
			</view>
			<view class="result_info_cell">
				<view class="result_info_title">行驶证照片</view>
				<view class="mt-5">
					<image class="upload_img" :src="picUrl+info.driving_license_pic" mode="widthFix"></image>
				</view>
			</view>
			<view class="result_info_cell">
				<view class="result_info_title">车辆照片</view>
				<view class="mt-5">
					<image class="upload_img" :src="picUrl+info.pic" mode="widthFix"></image>
				</view>
			</view>
			<view class="result_info_cell" v-if="info.contract.length>0">
				<view class="result_info_title">购车合同</view>
				<view class="mt-5">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.contract" :key="index" :span="6">
							<image class="upload_img mt-10" :src="picUrl+item" mode="aspectFill"></image>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="result_info_cell" v-if="info.invoice.length>0">
				<view class="result_info_title">购车发票</view>
				<view class="mt-5">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.invoice" :key="index" :span="12">
							<image class="upload_img mt-10" :src="picUrl+item" mode="aspectFill"></image>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<image v-if="info.bottom_img" class="sti_form_bottom_img" :src="picUrl+info.bottom_img" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		getQ1ActiveInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '',
				nums: 2,
				showResultPage: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom + 80,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				uni.showLoading({})
				this.getQ1ActiveInfo()
			}

		},
		onLoad() {
			var params = {
				event_code: 'gxr宠粉活动',
				path: 'pages/gxr/result',
				event_id: '',
				title: '',
				source_page: 'sti宠粉活动-审核结果',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getQ1ActiveInfo() {
				getQ1ActiveInfo({
					huodong_version: 2
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						uni.setNavigationBarTitle({
							title:res.data.info.huodong_title?res.data.info.huodong_title:'斯巴鲁官方车友会'
						})
						if (res.data.info.is_enroll == 0) {
							uni.navigateTo({
								url: '/pages/gxr/form'
							})
						} else {
							this.showResultPage = true
						}
						uni.hideLoading()
						//is_enroll:,   是否提交  0 未提交  1 已提交
					} else {}
				})
			},
			updateForm() {
				uni.navigateTo({
					url: '/pages/gxr/form?isUpdate=true'
				})
				var params = {
					event_code: 'gxr宠粉活动',
					path: 'pages/gxr/result',
					event_id: '',
					title: '',
					source_page: 'sti宠粉活动-修改信息',
					value: '',
				}
				app.BurialPoint(params)
			},
			updateForms(){
				uni.navigateTo({
					url: '/pages/gxr/forms?isUpdate=true'
				})
			},
			openForms() {
				uni.navigateTo({
					url: '/pages/gxr/forms'
				})
				var params = {
					event_code: 'gxr宠粉活动',
					path: 'pages/gxr/result',
					event_id: '',
					title: '',
					source_page: 'sti宠粉活动-补充资料',
					value: '',
				}
				app.BurialPoint(params)
			},
		},
		onPullDownRefresh() {
			this.getQ1ActiveInfo()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.share_title,
				imageUrl: this.info.share_img ? this.picUrl + this.info.share_img : this.picUrl + this.info.index_img
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #EEEEEE;
	}

	.sti_result_page {
		padding: 47rpx 47rpx 248rpx 47rpx;
		min-height: 100vh;
		position: relative;

		.audit_img_box {
			margin-top: 35rpx;
			text-align: center;

			.audit_img {
				width: 285rpx;
				height: 201rpx;
			}
		}

		.audit_text {
			color: #999999;
			font-size: 24rpx;
			text-align: center;
			margin-top: 20rpx;
		}

		.audit_text_no {
			color: #E02E2E;
			font-size: 24rpx;
			text-align: center;
			margin-top: 20rpx;
		}

		.result_info_box {
			margin-top: 50rpx;
			padding: 10rpx 30rpx 40rpx 30rpx;
			border-radius: 8rpx;
			background-color: #ffffff;

			.result_info_cell {
				padding: 40rpx 0;
				border-bottom: 1rpx solid #E9E9E9;

				.result_info_title {
					width: 120rpx;
					color: #999999;
					font-size: 22rpx;
				}

				.upload_img_box {
					width: 100%;
					height: 168rpx;
					margin-top: 20rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: #F2F2F2;
				}

				.upload_img {
					width: 100%;
					height: 168rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.card_img_box {
					width: 285rpx;
					height: 200rpx;
					margin-bottom: 20rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
				}

				.card_img {
					position: absolute;
					z-index: 2;
					width: 285rpx;
					height: 200rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.card_text {
					position: absolute;
					z-index: 2;
					text-align: center;
				}

				.upload_img_mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: rgba(0, 0, 0, .6);
				}

				.upload_audit {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.result_info_cell:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}
		}

		.submit_btn_block {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			color: #ffffff;
			border-radius: 8rpx;
			background-color: #C80F48;
		}

		.group_payok_btn_block {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			color: #ffffff;
			border-radius: 8rpx;
			background-color: #23AB5E;
		}

		.group_wait_btn_block {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			color: #ffffff;
			border-radius: 8rpx;
			background-color: #D0D0D0;
		}

		.edit_nums {
			font-size: 20rpx;
			margin-top: 10rpx;
			text-align: center;
		}

		.c-C80F48 {
			color: #C80F48;
		}

		.sti_form_bottom_img {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}
	}
</style>